<template>
  <div>
    <div class="header">
      <div class="header-item">
        项目名称：
        <el-input
          style="width: 180px"
          size="small"
          clearable
          v-model="search.projectName"
          placeholder="请输入项目名称"
        />
      </div>
      <div class="header-item">
        负责人：
        <el-input
          style="width: 180px"
          size="small"
          clearable
          v-model="search.principal"
          placeholder="请输入负责人"
        />
      </div>
      <div class="header-item">
        工程属性：
        <el-select
          @change="searchData"
          size="small"
          v-model="search.projectAttributes"
        >
          <el-option
            :value="0"
            label="全部"
          >
          </el-option>
          <el-option
            :value="1"
            label="新建"
          >
          </el-option>
          <el-option
            :value="2"
            label="改造"
          >
          </el-option>
        </el-select>
      </div>
      <div class="header-item">
        工程类型：
        <el-select
          @change="searchData"
          size="small"
          v-model="search.projectType"
        >
          <el-option
            :value="0"
            label="全部"
          />
          <el-option
            :value="1"
            label="分行"
          />
          <el-option
            :value="2"
            label="支行"
          />
          <el-option
            :value="3"
            label="营业网点"
          />
          <el-option
            :value="4"
            label="自助银行"
          />
          <el-option
            :value="5"
            label="ATM"
          />
          <el-option
            :value="6"
            label="保管箱"
          />
          <el-option
            :value="7"
            label="金库"
          />
          <el-option
            :value="8"
            label="银亭"
          />
        </el-select>
      </div>
      <div class="header-item">
        <el-button
          @click="searchData"
          size="small"
          type="primary"
        >
          搜索
        </el-button>
      </div>
      <div
        class="header-item"
        style="float: right"
      >
        <el-button
          @click="$router.push(`/approval/${formType}`)"
          size="small"
          type="success"
          icon="el-icon-plus"
        >
          新建{{ formTypeLabel }}
        </el-button>
      </div>
    </div>
    <el-row>
      <el-col :span="progressShow?18:24">
        <el-table
          :data="items"
          size="medium"
          @row-dblclick="dbClick"
          :height="parseInt($store.state.pageHeight)-350"
        >
          <el-table-column
            prop="projectName"
            align="center"
            label="项目名称"
            width="240"
          />
          <el-table-column
            prop="userName"
            align="center"
            label="创建人"
          >
            <template slot-scope="scope">
              <UserInfo
                :name="scope.row.userName"
                :id="scope.row.uid"
              ></UserInfo>
            </template>
          </el-table-column>
          <el-table-column
            prop="principal"
            align="center"
            label="负责人"
          />
          <el-table-column
            prop="concatPerson"
            align="center"
            label="联系人"
          />
          <el-table-column
            prop="projectAttributesText"
            align="center"
            label="工程属性"
          />
          <el-table-column
            prop="projectTypeText"
            align="center"
            label="工程类型"
          />
          <el-table-column
            align="center"
            label="当前状态"
          >
            <template slot-scope="scope">
              <el-tag
                v-if="canSubmit(scope.row)"
                size="small"
                type="warning"
              >
                待提交
              </el-tag>
              <el-tag
                size="small"
                type="danger"
                v-else-if="canReSubmit(scope.row)"
              >
                已拒绝
              </el-tag>
              <el-tag
                size="small"
                type="success"
                v-else-if="scope.row.taskEntitys.some(item=>item.resultStatus===1)"
              >
                已通过
              </el-tag>
              <el-tag
                size="small"
                v-else
              >
                审批中
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="160px"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime?$_util.formatDate(scope.row.createTime):'----' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            align="center"
            width="160px"
            label="更新时间"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime?$_util.formatDate(scope.row.updateTime):'----' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            align="center"
            label="操作"
            width="280"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                v-if="canSubmit(scope.row)"
                @click="submit(scope.row.id,formType)"
              >
                提交审批
              </el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="canReSubmit(scope.row)"
                @click="submit(scope.row.id,formType)"
              >
                重新提交
              </el-button>
              <el-button
                v-if="!canSubmit(scope.row)"
                size="mini"
                type="warning"
                @click="goProgress(scope.row.id)"
              >
                审批记录
              </el-button>
              <el-button
                size="mini"
                type="info"
                v-if="canSubmit(scope.row) || canReSubmit(scope.row) || scope.row.taskEntitys.some(item=>item.resultStatus===1)"
                @click="remove(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col
        :style="{height:`${$store.state.pageHeight-350}px`,overflow:`auto`}"
        :span="6"
        v-if="progressShow"
      >
        <Process
          :form-id="formId"
          @close="progressShow=false;formId=0"
        />
      </el-col>
    </el-row>
    <FooterPage
      :page-size="pre_page"
      :total-page="total_count"
      :current-page="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    />
  </div>
</template>
<script>
  import FooterPage from '@/component/common/FooterPage'
  import Process from '@/component/approval/Process'

  export default {
    name: 'DefaultApproval',
    components: {
      FooterPage,
      Process
    },
    data () {
      return {
        formType: '',
        progressShow: false,
        formId: 0,
        search: {
          projectName: '',
          principal: '',
          projectAttributes: 0,
          projectType: 0
        },
        types: [],
        items: []
      }
    },
    computed: {
      formTypeLabel () {
        const target = this.$store.state.formTypes.find(item => item.value === this.formType) || {}
        return target.label
      }
    },
    created () {
      this.formType = this.$route.params.formType
      this.getItems()
    },
    activated () {
      if (this.$_isInit()) return
      this.getItems()
    },
    methods: {
      async remove (id) {
        await this.$confirm('确定要删除该单据吗？', '删除确认')
        await this.$service.gzl.removeDefaultForm(id)
        this.getItems()
      },
      canSubmit (item) {
        // 如果没有提交记录 可以提交
        if (!item.taskEntitys.length) return true
      },
      canReSubmit (item) {
        // 如果没有提交记录 可以提交
        return item.taskEntitys.length && item.taskEntitys.every(item => item.resultStatus === 2)
      },
      async submit (id, formType) {
        await this.$confirm(
          '提交前请仔细核对内容，确定要提交吗？',
          '提交确认'
        )
        await this.$service.gzl.formSubmit(id, formType)
        this.$message.success('提交成功')
        this.getItems()
        this.progressShow = false
        this.formId = 0
      },
      goProgress (id) {
        if (id === this.formId) {
          this.progressShow = false
          this.formId = 0
          return
        }
        this.formId = id
        this.progressShow = true
      },
      dbClick (row) {
        this.$router.push(`/approval/${this.formType}/${row.id}`)
      },
      searchData () {
        this.page = 1
        this.getItems()
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: this.pre_page,
          formType: this.formType,
          ...this.search
        }
        const { data } = await this.$service.gzl.defaultFormList(params)
        this.items = data.data.records
        this.total_count = data.data.total
      },
      pageChange (page) {
        this.page = page
        this.getItems()
      },
      sizeChange (size) {
        this.pre_page = size
        this.getItems()
      }
    }
  }
</script>

<style scoped>
  .header {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  .header-item {
    display: inline-block;
    margin-right: 10px;
  }
</style>
